<template>
  <div class="app-container" v-loading="loading">
    <div style="margin-bottom: 40px;display: flex;justify-content: right;">
      <el-button @click="endTrain" type="primary">结束训练</el-button>
    </div>
    <div class="grid-container">
      <div
        v-for="(item,index) in proposeList"
        v-if="item.enable"
        :key="index"
        class="item con"
        :style="{backgroundColor: bgColor[index > bgColor.length ? (index % bgColor.length) : index]}"
        @click="startTrain(item)"
      >
        <img class="bg_img" :src="bgImg[index >= bgImg.length ? (index % bgImg.length) : index]"/>
        <span style="z-index: 3;">{{ item.proposeName }}</span>
      </div>
    </div>
  </div>
</template>

<script>

import {addTaskRecord, listPropose, startBat} from "@/api/train";
import img0 from "../../../assets/uav/0.png"
import img1 from "../../../assets/uav/1.png"
import img2 from "../../../assets/uav/2.png"
import img3 from "../../../assets/uav/3.png"
import img4 from "../../../assets/uav/4.png"
import img5 from "../../../assets/uav/5.png"
import img6 from "../../../assets/uav/6.png"

export default {
  name: "index",
  components: [],
  data() {
    return {
      loading: false,
      total: 0,
      proposeList: [],
      bgColor: ['#4CA846', '#F68F24', '#4DC7EC', '#D0E4A8', '#C077AF', '#C077AF', '#F03329', '#83B4FF', '#5A72A0', '#FF8F00', '#FFDB00'],
      bgImg: [img0, img1, img2, img3, img4, img5, img6]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 开始训练
    async startTrain(row) {
      let taskInfo
      await addTaskRecord({trainingId: row.trainingProposeId, mountType: row.mountType}).then(res => {
        taskInfo = `taskInfo=taskRecordId:${res.data.id}--taskName:${row.proposeName}--mountType:${row.mountType}--`
      })
      const {ueMap, originPosX, originPosY, uavType} = row
      await startBat({fileUrl: row.batUrl}).then(res => {
        console.log(res)
      })
      // this.$ws.send(JSON.stringify({
      //   cmd: "start",
      //   data: {
      //     ue4Map: ueMap,
      //     originPosX,
      //     originPosY,
      //     uavType,
      //     taskInfo
      //   }
      // }))
    },
    // 结束训练
    async endTrain(row) {
      await startBat({fileUrl: "D:/PX4PSP/RflySimAPIs/MySITL/MySITLClose.bat"}).then(res => {
        console.log(res)
      })
    },
    getList() {
      this.loading = true
      listPropose(this.queryParams).then(response => {
        this.proposeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    }
  }
}
</script>

<style scoped lang="scss">
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-row-gap: 50px;
  grid-column-gap: 50px;

  .item {
    box-shadow: 0px 6px 12px -4px rgba(0, 173, 181, 0.8);
    cursor: pointer;
    width: 100%; /* 设置宽度 */
    position: relative; /* 为了绝对定位的padding */
    padding-bottom: 10%; /* 高度等于宽度 */
    background-color: #1ab394; /* 背景颜色，仅为了更明显地展示矩形 */
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10%;
    font-size: 26px;
    color: #fff;
    transition: transform 0.5s;
  }

  .item:hover {
    transform: scale(1.1, 1.1);
  }

  /* 绝对定位padding以保持内容在矩形内 */
  .item:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 50%; /* 如果需要内容也居中 */
  }
}

.con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .bg_img {
    width: 70%;
    margin-bottom: 10px;
  }
}

</style>
`
